<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <title>进度条</title>
            <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
            <script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script>
            <script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script>
            <script src="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
      </head>
      <body>
            <div class="progress" style="height: 20px;">
                  <div class="progress-bar" style="width: 70%;">70%</div>
            </div>

            <!-- 不同颜色进度条 -->
            <div class="progress">
                  <div class="progress-bar bg-success" style="width: 40%;"></div>
            </div>
            <div class="progress">
                  <div class="progress-bar bg-info" style="width: 50%;"></div>
            </div>
            <div class="progress">
                  <div class="progress-bar bg-warning" style="width: 60%;"></div>
            </div>
            <div class="progress">
                  <div class="progress-bar bg-danger" style="width: 80%;"></div>
            </div>

            <!-- 条纹的进度条 -->
            <div class="progress">
                  <div class="progress-bar progress-bar-striped" style="width: 90%;"></div>
            </div>

            <!-- 动画进度条 -->
            <div class="progress">
                  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 30%;"></div>
            </div>
      </body>
</html>